<template>
	<view class="page-container">
	  <!-- 登录按钮区域 -->
	  <view class="login-section">
		<!-- 微信登录按钮 -->
		<button 
		  class="login-btn wechat-btn" 
		  @tap="handleWechatLogin"
		>
		  微信一键登录
		</button>
		
		<!-- 手机号登录按钮 -->
		<button 
		  class="login-btn phone-btn" 
		  @tap="handlePhoneLogin"
		>
		  手机号安全登录
		</button>
	  </view>
  
	  <!-- 用户协议区域 -->
	  <view class="agreement-section">
		<view class="checkbox-wrapper" @tap="toggleAgreement">
		  <view class="checkbox" :class="{ checked: isAgreed }" @tap="Aggrement">
			<text v-if="isAgreed" class="check-mark">✓</text>
		  </view>
		</view>
		<view class="agreement-text">
		  <text>我已阅读并同意</text>
		  <text class="link" @tap.stop="goToAgreement('user')">《用户协议》</text>
		  <text>和</text>
		  <text class="link" @tap.stop="goToAgreement('privacy')">《隐私协议》</text>
		</view>
	  </view>
	</view>
  </template>
  
  <script>
import TouristStatusVue from '../TouristStatus/TouristStatus.vue'

  export default {
	data() {
	  return {
		isAgreed: false
	  }
	},
	methods: {
	  toggleAgreement() {
		this.isAgreed = !this.isAgreed
	  },
	  Aggrement() {
		  uni.navigateTo({
		  	url: '/pages/TouristStatus/TouristStatus'
		  })
	  },
	  async handleWechatLogin() {
		if (!this.isAgreed) {
		  this.showAgreementTip()
		  return
		}
		try {
		  // 实现微信登录逻辑
		  uni.showLoading({
			title: '登录中...'
		  })
		  // 调用微信登录接口
		  // const res = await this.wechatLogin()
		  uni.hideLoading()
		} catch (error) {
		  uni.hideLoading()
		  uni.showToast({
			title: '登录失败',
			icon: 'none'
		  })
		}
	  },
	  handlePhoneLogin() {
		if (!this.isAgreed) {
		  this.showAgreementTip()
		  return
		}
		// 跳转到手机号登录页面
		uni.navigateTo({
		  url: '/pages/login2/login2'
		})
	  },
	  goToAgreement(type) {
		uni.navigateTo({
		  url: `/pages/agreement/index?type=${type}`
		})
	  },
	  showAgreementTip() {
		uni.showToast({
		  title: '请先阅读并同意用户协议和隐私协议',
		  icon: 'none'
		})
	  }
	}
  }
  </script>
  
  <style scoped>
  .page-container {
	min-height: 100vh;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	padding: 0 40rpx;
  }
  
  .login-section {
	margin-top: 400rpx;
  }
  
  .login-btn {
	width: 100%;
	height: 88rpx;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	margin-bottom: 30rpx;
	border: none;
  }
  
  .login-btn::after {
	border: none;
  }
  
  .wechat-btn {
	background-color: #8a2be2;
	color: #fff;
  }
  
  .phone-btn {
	background-color: #f5f5f5;
	color: #333;
  }
  
  .agreement-section {
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
  .checkbox-wrapper {
	padding: 10rpx;
  }
  
  .checkbox {
	width: 32rpx;
	height: 32rpx;
	border: 2rpx solid #999;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10rpx;
  }
  
  .checkbox.checked {
	background-color: #8a2be2;
	border-color: #8a2be2;
  }
  
  .check-mark {
	color: #fff;
	font-size: 24rpx;
  }
  
  .agreement-text {
	font-size: 24rpx;
	color: #999;
  }
  
  .link {
	color: #8a2be2;
  }
  
  /* 按钮点击效果 */
  .wechat-btn:active {
	opacity: 0.8;
  }
  
  .phone-btn:active {
	background-color: #eee;
  }
  </style>